import React, { useState } from "react";
import DropMask from "../../components/DropMask/index";
import { useModel } from "umi";

const FilterPage: React.FC = () => {
  const { setTheme } = useModel("useConfig");
  const [maskVisible, setMaskVisible] = useState<boolean>(true);

  const hideVisible = () => {
    setMaskVisible(false);
  };

  const changeTheme = () => {
    setTheme({ color: "black" });
  };

  return (
    <div>
      滤镜
      <DropMask visible={maskVisible} hideVisible={hideVisible} />
      <div className="flex">
        <div className="flex-shrink-0">
          <img
            className="rounded-lg w-56"
            src="https://images.unsplash.com"
            alt="with"
          />
        </div>
      </div>
      <div onClick={changeTheme}>hahahha</div>
    </div>
  );
};

export default FilterPage;
